<template>
  <div>
    <van-nav-bar
      :fixed="true"
      class="citynav"
      title="城市列表"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="bottom">
      <van-index-bar :index-list="indexList" :sticky-offset-top="50">
        <van-index-anchor index="#">当前城市</van-index-anchor>
        <van-cell
          title="安庆"
          @click="
            areaFn({
              label: '安庆',
              pinyin: 'anqing',
              short: 'aq',
              value: 'AREA|b4e8be1a-2de2-e039'
            })
          "
        />

        <!-- <van-index-anchor index="热"
          >热门城市
          <van-cell
            v-for="(item, index) in cityHot"
            :key="index"
            :title="item.label"
            @click="areaFn(item.label)"
          /></van-index-anchor> -->

        <van-index-anchor index="热">热门城市</van-index-anchor>
        <template v-for="(item, index) in cityHot">
          <van-cell :key="index" :title="item.label" @click="areaFn(item)" />
        </template>

        <!-- <van-index-anchor v-for="(item, key) in cityObj" :key="key" :index="key"
          >{{ key }}
          <van-cell
            v-for="(i, index) in item"
            :key="index"
            :title="i.label"
            @click="areaFn(i.label)"
          ></van-cell>
        </van-index-anchor> -->

        <template v-for="(item, key) in cityObj">
          <van-index-anchor :key="key" :index="key">{{ key }}</van-index-anchor>
          <div :key="key + '1'">
            <van-cell
              v-for="(i, index) in item"
              :key="index"
              :title="i.label"
              @click="areaFn(i)"
            />
          </div>
        </template>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import { getCitys, getHot } from '@/api/area'
import { setArea } from '@/utils/storage'
import { Toast } from 'vant'
export default {
  data() {
    return {
      cityHot: [],
      cityObj: {},
      indexList: ['#', '热']
    }
  },
  async created() {
    const { data } = await getCitys({ level: 1 })
    // console.log(data)
    const cityList = data.body
    // const obj = {
    //   A: [],
    //   B: [],
    //   C: [],
    //   D: [],
    //   E: [],
    //   F: [],
    //   G: [],
    //   H: [],
    //   I: [],
    //   J: [],
    //   K: [],
    //   L: [],
    //   M: [],
    //   N: [],
    //   O: [],
    //   P: [],
    //   Q: [],
    //   R: [],
    //   S: [],
    //   T: [],
    //   U: [],
    //   V: [],
    //   W: [],
    //   X: [],
    //   Y: [],
    //   Z: []
    // }
    const obj = {}
    cityList.forEach((item) => {
      const k = item.short[0].toUpperCase()
      obj[k] = []
      // obj[k].push(item)
    })
    // for (const key in obj) {
    //   if (obj[key].length === 0) {
    //     obj[key] = [{ label: '暂无城市' }]
    //   }
    // }
    // console.log(obj)
    // this.cityObj = obj
    const keyArr = Object.keys(obj)
    keyArr.sort()
    // console.log(keyArr)
    this.indexList.push(...keyArr)
    // console.log(this.indexList)

    const obj1 = {}
    keyArr.forEach((item) => {
      obj1[item] = []
    })

    cityList.forEach((item) => {
      const k = item.short[0].toUpperCase()
      // obj[k] = []
      obj1[k].push(item)
    })
    // console.log(obj1)
    this.cityObj = obj1

    // 热门
    const { data: res } = await getHot()
    // console.log(res)
    this.cityHot = res.body
  },
  methods: {
    areaFn(label) {
      setArea(JSON.stringify(label))
      Toast.success('选择' + label.label + '成功')
    }
  },
  components: {}
}
</script>

<style scoped lang="less">
.citynav {
  //   width: 100%;
  z-index: 999;
}
/deep/ .bottom {
  margin-top: 50px;
  .van-index-bar__index {
    height: 18px;
    padding: 0 5px;
    margin-bottom: 5px;
    margin-right: 2px;
    line-height: 18px;
  }
  .van-index-bar__index--active {
    border-radius: 50%;
    background-color: aqua;
  }
}
</style>
